<%--
  Created by IntelliJ IDEA.
  User: 陌·笙
  Date: 2018-12-28
  Time: 11:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>用户管理</title>
    <jsp:include page="/comm/tag.jsp"/>
    <script>
        $(function(){
            $("#mytable").bootstrapTable({
                url:"/controller/showUserConsume",
                height:430,
                pageSize:6,
                pageNumber:1,
                pageList:[6],
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        iphoneNum:$("[name='iphoneNum']").val(),
                        userName:$("[name='userName']").val(),
                    };
                    return temp;
                },
                locale:'zh-CN',//中文支持,
                toolbar:'#top',
                columns:[
                    {field:"btype",title:"客户名称",align:"center"},
                    {field:"iphoneNum",title:"电话号码",align:"center"},
                    {field:"myprice",title:"我方应收金额",align:"center"},
                ]
            })
        })
        function cha(){
            var opts = $("#mytable").bootstrapTable("getOptions") ;
            var userName=$("[name='userName']").val();
            var iphoneNum=$("[name='iphoneNum']").val();
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            $.ajax({
                url:"/controller/showUserConsume",
                type:"get",
                data:{"userName":userName,"iphoneNum":iphoneNum,'limit':limit,'offset':offset},
                success:function(data){
                    $("#mytable").bootstrapTable("load",data);
                }
            })
        }
    </script>
</head>
<body>
<div style="margin-left: 50px;margin-right: 50px">
    <div class="#top" style="margin-top: 30px">
        <div class="col-md-3">
            <button onclick="todel()" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>&nbsp;&nbsp;导出</button>
        </div>
        <div class="col-md-9">
            <form action="" method="post" role="form" class="form-horizontal" enctype="multipart/form-data">
                <div class="form-group col-md-4">
                    <label for="" class="col-md-4 control-label">姓名:</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" name="userName" placeholder="可模糊查询">
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="" class="col-md-4 control-label">电话号码:</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" name="iphoneNum" placeholder="可模糊查询">
                    </div>
                </div>
                <button type="button" class="btn btn-primary btn-info glyphicon glyphicon-search" onclick="cha()">查询</button>
            </form>
        </div><%--搜索框--%>
    </div>
    <table id="mytable" class="table-striped"></table>
</div>
</body>
</html>
